<template>
    <div id="welcome">

        <div class="wrap box-shadow" style="border-left: 5px solid #c7c7c7;">
            <el-row>
                <el-col :span="6">
                    <div>
                        <img :src="logo" alt="" style="width: 100%;height: 220px;">
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="p-15">
                        <h3>智慧超市运营管理系统</h3>
                        <p style="margin: 15px 0;">
                            欢迎你 !<br>
                            智慧超市运营管理系统采用时下主流的SpringBoot+Vue强强联合，并运用了Mybatis-plus进行快速开发！开发此后台管理系统！
                            <br>
                            <br>
                            <br>
                            <br>
                        </p>
                        <el-row>
                            <el-button type="primary" size="small" @click="goMaYun">码云地址</el-button>
                        </el-row>
                    </div>
                </el-col>
                <!-- <el-col :span="8">
                     <div class="p-15">
                         <h3>技术选型</h3>
                         <el-row>
                             <el-col :span="6">
                                 <p style="font-weight: bold;margin-bottom: 8px;color: #f8ac59;">前端技术</p>
                                 <div style="color: #46a6ff;">
                                     <p>SpringBoot</p>
                                     <p>Mybatis-plus</p>
                                     <p>JWT</p>
                                     <p>MySql</p>
                                     <p>···</p>
                                 </div>
                             </el-col>
                             <el-col :span="6">
                                 <p style="font-weight: bold;margin-bottom: 8px;color: #f8ac59;">后端技术</p>
                                 <div style="color: #46a6ff;">
                                     <p>Vue</p>
                                     <p>ElementUI</p>
                                     <p>Axios</p>
                                     <p>Sass</p>
                                     <p>···</p>
                                 </div>

                             </el-col>
                         </el-row>
                     </div>
                 </el-col>-->
            </el-row>
        </div>
        <div class="wrap">
            <el-row :gutter="15">
                <el-col :span="8">
                    <div class="p-15 box-shadow">
                        <div id="chart_1" ref="chart_1" style="width: 100%;height: 300px;overflow: hidden;"></div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="p-15 box-shadow">
                        <div id="chart_2" ref="chart_2" style="width: 100%;height: 300px;overflow: hidden;"></div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="p-15 box-shadow">
                        <div id="chart_3" ref="chart_3" style="width: 100%;height: 300px;overflow: hidden;"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--
                <div class="wrap box-shadow" style="border-left: 5px solid #c7c7c7;">
                    <el-row>
                        <el-col :span="24">
                            <div class="p-15">
                                <p style="color: #f8ac59;">领取阿里云通用云产品1888优惠券</p>
                                <p style="color: #46a6ff;">https://www.aliyun.com/minisite/goods?userCode=brki8iof</p>
                                <p style="color: #f8ac59;">领取腾讯云通用云产品2860优惠券</p>
                                <p style="color: #46a6ff;">
                                    https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</p>
                                <p style="color: #f8ac59;">阿里云服务器折扣区</p>
                                <p style="color: #46a6ff;">☛☛点我进入☚☚</p>
                                <p style="color: #f8ac59;"> 腾讯云服务器秒杀区</p>
                                <p style="color: #46a6ff;">☛☛点我进入☚☚</p>
                                <p style="color: #f8ac59;">云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)</p>
                                <p style="color: #46a6ff;">☛☛点我进入☚☚</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>-->

    </div>
</template>

<script>
    import {roleCount} from "@/api/admin/welcome";
    import logo from "../../assets/logo.png";

    export default {
        name: "Welcome",
        mounted() {
            this.chart_1();
            roleCount().then(resp => {
                this.chart_2_data = resp.data;
                this.chart_2();
            });

            this.chart_3();

        },
        data() {
            return {
                logo: logo,
                chart_2_data: {
                    plainUserCount: 0,
                    adminCount: 0,
                    superAdminCount: 0,
                    count: 0,
                },
                chart_3_data: {
                    websiteViews: 0,
                }
            }
        },
        methods: {
            goMaYun() {
                window.open("https://gitee.com/botaoshow/tip", "_blank");
            },
            chart_1() {
                let myChart = echarts.init(this.$refs.chart_1);
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '网站性能分析',
                        subtext: '网站心跳Ping',
                        left: 'right'
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [20, 25, 12, 50, 46, 24, 34],
                        type: 'line'
                    }]
                };
                myChart.setOption(option);
                option.series[0].data.push(parseInt(Math.random() * 50))
                option.series[0].data.shift();
                myChart.setOption(option);

            },
            chart_2() {
                let myChart = echarts.init(this.$refs.chart_2);
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '公司成员结构分析',
                        subtext: '共有' + this.chart_2_data.count + '位用户',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['普通员工', '普通管理员', '超级管理员']
                    },
                    series: [
                        {
                            name: '角色',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: [
                                {value: this.chart_2_data.plainUserCount, name: '普通员工'},
                                {value: this.chart_2_data.adminCount, name: '普通管理员'},
                                {value: this.chart_2_data.superAdminCount, name: '超级管理员'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            chart_3() {
                let myChart = echarts.init(this.$refs.chart_3);
                let option = {
                    title: {
                        text: '网站日访问量'
                    },
                    tooltip: {},
                    legend: {
                        data: ['人次']
                    },
                    xAxis: {
                        data: ["前6日", "前5日", "前4日", "前3日", "前2日", "昨日", "今日"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人次',
                        type: 'bar',
                        data: [5, 20, 36, 10, 12, 20, 50]
                    }]
                };

                myChart.setOption(option);
                option.series[0].data.push(parseInt(Math.random() * 100))
                option.series[0].data.shift();
                myChart.setOption(option);


            }
        }
    }
</script>

<style scoped lang="scss">

    .p-15 {
        padding: 15px 25px;
    }

    .wrap {
        margin: 5px 15px;
        color: #676a6c;

        h3 {
            font-size: 26px;
            font-weight: 500;
            margin: 8px 0;
        }

        p {
            font-size: 13px;
        }
    }
</style>